<template>
  <van-cell v-bind="$attrs" :value="date" @click="show = true" />
  <van-calendar v-bind="$attrs" v-model:show="show" @confirm="onConfirm" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { useCustomFieldValue } from '@vant/use'

const date = ref('')
const show = ref(false)

const formatDate = (date: Date) =>
  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
const onConfirm = (dateValue: any) => {
  show.value = false
  if (Array.isArray(dateValue) && dateValue.length) {
    const [start, end] = dateValue
    date.value = `${formatDate(start)} - ${formatDate(end)}`
  } else {
    date.value = formatDate(dateValue)
  }
  useCustomFieldValue(() => date.value)
}

defineOptions({
  name: 'VCalendar'
})
</script>

<style scoped></style>
